<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent='decreasecount'>
        <i class="fa fa-minus-circle inner"></i>
      </div>
    </transition>

    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add" @click.stop.prevent='addcount'><i class="fa fa-plus-circle"></i></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex';

  export default {
    name: 'cartcontrol',
    props: {
      food: {
        type: Object
      }
    },

    methods: {
      ...mapMutations({
        add: 'ADD_CART',
        minus: 'MINUS_CART',
        clear: 'CLEAR_CART'
      }),
      addcount(event) {
        this.add(this.food);
      },
      decreasecount(event) {
        this.minus(this.food);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .cartcontrol
    font-size 0
    .cart-decrease
      display inline-block
      padding 6px
      &.move-enter-active, &.move-leave-active
        transition all 0.4s linear
        .inner
          transform rotate(90deg)
      &.move-enter, &.move-leave-active
        opacity: 0
        transform translate3D(24px, 0, 0)
      .inner
        font-size 20px
        line-height 20px
        color rgb(0, 160, 220)
        transition all 0.4s linear
        transform rotate(0)
    .cart-add
      display inline-block
      font-size 20px
      line-height 20px
      color rgb(0, 160, 220)
      padding 6px
    .cart-count
      color rgb(147, 153, 159)
      font-size 16px
      line-height 16px
      text-align center
      width 18px
      display inline-block


</style>
